import React from 'react';
import { Slider, Switch, Card, message } from 'antd';
import SliderWithInputBox from './components/slider-with-input-box'
import SliderWithIcon from './components/slider-with-icon'

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

export default class TimePickerForm extends React.Component {
  state = {
    disabled: false,
  };

  handleDisabledChange = disabled => {
    this.setState({ disabled });
  };

  render() {
    const { disabled, reverse } = this.state;
    return (
      <>
        <Card title="1、基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态" style={{ marginTop: 10 }}>
          <Slider defaultValue={30} disabled={disabled} />
          <Slider range defaultValue={[20, 50]} disabled={disabled} />
          Disabled: <Switch key="1" size="small" checked={disabled} onChange={disable => this.setState({ disable })} />
        </Card>

        <Card title="2、带输入框的滑块 和 数字输入框 组件保持同步" style={{ marginTop: 10 }}>
          <SliderWithInputBox></SliderWithInputBox>
        </Card>

        <Card title="3、带 icon 的滑块,滑块左右可以设置图标来表达业务含义" style={{ marginTop: 10 }}>
          <SliderWithIcon></SliderWithIcon>
        </Card>

        <Card title="4、自定义提示,使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。" style={{ marginTop: 10 }}>
          <Slider tipFormatter={(value) => value + "%"} />
          <Slider tipFormatter={null} />
        </Card>

        <Card title="5、事件、当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入" style={{ marginTop: 10 }}>
          <Slider defaultValue={30} onChange={value => message.info(value)} onAfterChange={value => message.success(value)} />
          <Slider
            range
            step={10}
            defaultValue={[20, 50]}
            onChange={value => message.info(value)}
            onAfterChange={value => message.success(value)}
          />
        </Card>

        <Card title="6、带标签的滑块" style={{ marginTop: 10 }}>
          <h4>included=true</h4>
          <Slider marks={marks} defaultValue={37} />
          <Slider range marks={marks} defaultValue={[26, 37]} />

          <h4>included=false</h4>
          <Slider marks={marks} included={false} defaultValue={37} />

          <h4>marks & step</h4>
          <Slider marks={marks} step={10} defaultValue={37} />

          <h4>step=null</h4>
          <Slider marks={marks} step={null} defaultValue={37} />
        </Card>

        <Card title="7、控制 ToolTip 的显示" style={{ marginTop: 10 }}>
          <Slider defaultValue={30} tooltipVisible />
        </Card>

        <Card title="8、设置 reverse 可以将滑动条置反" style={{ marginTop: 10 }}>
          <Slider defaultValue={30} reverse={reverse} />
          <Slider range defaultValue={[20, 50]} reverse={reverse} />
          Reversed: <Switch size="small" checked={reverse} onChange={reverse => this.setState({ reverse })} />
        </Card>

      </>
    );
  }
}



// API#
// 参数	                           说明	类型	默认值	版本
// allowClear	                     支持清除, 单选模式有效	boolean	false	
// defaultValue	                   设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]	number|number[]	0 or [0, 0]	
// disabled	                       值为 true 时，滑块为禁用状态	boolean	false	
// dots	                           是否只能拖拽到刻度上	boolean	false	
// included	                       marks不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列	boolean	true	
// marks	                         刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式	object	{ number: string|ReactNode } or { number: { style: object, label: string|ReactNode } }	
// max	                           最大值	number	100	
// min	                           最小值	number	0	
// range	                         双滑块模式	boolean	false	
// reverse	                       反向坐标轴	boolean	false	3.24.0
// step	                           步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。	number|null	1	
// tipFormatter	                   Slider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip。	Function|null	IDENTITY	
// value	                         设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]	number|number[]		
// vertical	                       值为 true 时，Slider 为垂直方向	Boolean	false	
// onAfterChange	                 与 onmouseup 触发时机一致，把当前值作为参数传入。	Function(value)	NOOP	
// onChange	                       当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。	Function(value)	NOOP	
// tooltipPlacement	               设置 Tooltip 展示位置。参考 Tooltip。	string		3.19.0
// tooltipVisible	                 值为true时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。	Boolean		3.11.0
// getTooltipPopupContainer	       Tooltip 渲染父节点，默认渲染到 body 上。	Function	() => document.body	3.19.0

// 方法#
// 名称	                           描述	版本
// blur()	                         移除焦点	
// focus()	                       获取焦点